<template>
  <div class="pager-container" v-if="pageNumber >= 1">
    <a href="javascript:void 0" :class="{ disabled: current === 1 }" @click="handleChangePage(1)"
      >|&lt;&lt;</a
    >
    <a
      href="javascript:void 0"
      :class="{ disabled: current === 1 }"
      @click="handleChangePage(current - 1)"
      >&lt;&lt;</a
    >
    <a
      href="javascript:void 0"
      v-for="(t, i) in pages"
      :key="i"
      :class="{ active: t === current }"
      @click="handleChangePage(t)"
      >{{ t }}</a
    >
    <a
      href="javascript:void 0"
      :class="{ disabled: current === pageNumber }"
      @click="handleChangePage(current + 1)"
      >&gt;&gt;</a
    >
    <a
      href="javascript:void 0"
      :class="{ disabled: current === pageNumber }"
      @click="handleChangePage(pageNumber)"
      >&gt;&gt;|</a
    >
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'

export default defineComponent({
  props: {
    current: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    },
    visibleNumber: {
      type: Number,
      default: 5
    }
  },
  emits: {
    pageChange: (newPage: number) => newPage
  },
  setup(props, { emit }) {
    // 总页数
    const pageNumber = computed(() => Math.ceil(props.total / props.limit))
    // 最小页数
    const visibleMin = computed(() => {
      let min = props.current - Math.floor(props.visibleNumber / 2)
      if (min < 1) {
        min = 1
      }
      return min
    })
    // 最大页数
    const visibleMax = computed(() => {
      let max = visibleMin.value + props.visibleNumber - 1
      if (max > pageNumber.value) {
        max = pageNumber.value
      }
      return max
    })
    // 生成页数
    const pages = computed(() => {
      let nums = []
      let min = visibleMin.value
      // 保证至少有 props.visibleNumber 个
      // let dis = visibleMax.value - visibleMin.value + 1
      // if (dis < props.visibleNumber) {
      //   min = visibleMin.value - (props.visibleNumber - dis)
      // }
      for (let i = min; i <= visibleMax.value; i++) {
        nums.push(i)
      }
      return nums
    })

    const handleChangePage = (newPage: number) => {
      if (newPage < 1) {
        newPage = 1
      }
      if (newPage > pageNumber.value) {
        newPage = pageNumber.value
      }
      if (newPage === props.current) {
        return
      }
      emit('pageChange', newPage)
    }

    return {
      pageNumber,
      pages,
      handleChangePage
    }
  }
})
</script>

<style lang="less" scoped>
@import '@/styles/var.less';
.pager-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  a {
    color: @primary;
    margin: 0 6px;
    cursor: pointer;
    &.disabled {
      color: @lightWords;
      cursor: not-allowed;
    }
    &.active {
      color: @words;
      font-weight: bold;
      cursor: text;
    }
  }
}
</style>